<template>
  <div class="map-view" id="mapview" ref="mapviewTarget">
    <div class="menu">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
        <el-menu-item class="noneSelect">
          <!-- <img style="height: 25px;" src="@/assets/image/logo.png" alt="光谷智慧交通" /> -->
          <span class="logo"> 光谷智慧交通</span>
        </el-menu-item>
        <el-menu-item index="1" @click="handleROad"><span class="iconfont icon-lukuang">&nbsp;</span>
          实时路况</el-menu-item>
        <CommonCom v-if="type === 'common' && mapviewTarget" :active-index="activeIndex" />
        <TrafficCom v-if="type !== 'common' && mapviewTarget" :active-index="activeIndex" />
        <el-sub-menu index="8">
          <template #title><span class="iconfont icon-gongjuxiang">&nbsp;</span>工具箱</template>
          <el-menu-item index="8-1" @click="activeDrawLine">测量距离</el-menu-item>
          <el-menu-item index="8-2" @click="activeDrawArea">测量面积</el-menu-item>
          <el-menu-item index="8-3" @click="clearDraw">清除测量</el-menu-item>
          <el-menu-item index="8-4" @click="exportImg">导出图片</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="8" v-if="type === 'admin'" @click="managerStore.isShow = true"><span
            class="iconfont icon-guanli">&nbsp;</span>用户管理</el-menu-item>
        <div class="flex-grow" />
        <el-autocomplete v-model="input" :fetch-suggestions="querySearch" :value-key="'label'" placeholder="请输入查询内容"
          clearable style="width: 300px ;height: 32px; margin: auto 0">
          <template #prepend>
            <el-select v-model="inputSelect" style="width: 75px">
              <el-option label="类型" value="事件类型" />
              <el-option label="地点" value="发生地点" />
              <el-option label="状态" value="处理状态" v-if="type !== 'common'" />
            </el-select>
          </template>
          <template #append>
            <el-button @click="search">搜索</el-button>
          </template>
        </el-autocomplete>
        <el-avatar>
          <el-dropdown trigger="click" style="overflow: hidden;">
            <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px;">{{ username ?
              username.substring(0, 1) : '' }}</span>
            <template #dropdown>
              <!-- 显示完整用户名 -->
              <el-dropdown-item disabled style="cursor: default;">{{ username }}</el-dropdown-item>
              <el-dropdown-item @click="toggleUpdate" v-if="type === 'common'">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </template>
          </el-dropdown>
        </el-avatar>
      </el-menu>
    </div>
    <div id="map">
      <div class="map-container">
        <img src="@/assets/image/map1.png" alt="" @click="handlevector" />
        <img src="@/assets/image/map2.png" alt="" @click="handleimage" />
      </div>
    </div>
    <LayerTree v-if="type === 'traffic'" />
    <QueryRoad v-if="isShowRoad" />
    <!-- 长度显示的Overlay -->
    <el-tag id="length-overlay" type="primary"></el-tag>
    <!-- 面积显示的Overlay -->
    <el-tag id="area-overlay" type="primary"></el-tag>
    <!-- 查询显示弹窗 -->
    <PopUp :selectData="selectData" id="InputPopup" v-show="InputFlag" />
    <UpdatePassword v-show="managerStore.isUpdate"></UpdatePassword>
    <UserManage v-show="managerStore.isShow"></UserManage>
  </div>

</template>

<script setup>
import { ref, getCurrentInstance, onMounted, watch } from 'vue'

/* 引入公共状态管理对象 */
import { useCommonStore } from '@/stores/common'
import { useManagerStoreWithOut } from '@/stores/manager'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'

/* 引入子组件 */
import LayerTree from '@/components/LayerTree.vue'
import QueryRoad from '@/components/QueryRoad.vue'
import UpdatePassword from '@/components/UpdatePassword.vue'
import UserManage from '@/components/UserManage.vue'
import PopUp from '@/components/PopUp/InputPopup/popup.vue'
import CommonCom from './Com/CommonCom.vue'
import TrafficCom from './Com/TrafficCom.vue'

/* 引入工具箱 */
import { initMap, gaode_vector } from '@/hook/LoadBasicMap/index.js'
import { useToolsBoxHook } from './Hooks/useToolsBoxHook.js'
import { logout, toggleUpdate } from '@/hook/user-api/userState.js'
import { usequeryInput, selectData } from './Hooks/useInputQuery.js'
import { claerMap } from '@/hook/MapClear.js'

/* 加载地图 */
initMap()
/* 工具箱 initMap要在useToolsBoxHook前面 */
const { activeDrawLine, activeDrawArea, clearDraw, exportImg } = useToolsBoxHook()
const { proxy } = getCurrentInstance()
let $map = null
/* 引入公共状态管理对象 */
const store = useCommonStore()
const managerStore = useManagerStoreWithOut()
const { InputFlag, changeEventFlag } = storeToRefs(store)

/* 地图初始化 */
const mapviewTarget = ref(null)

/*用户信息*/
const username = ref(null)
const type = ref(null)

/* 实时路况 */
const isShowRoad = ref(false)
const handleROad = () => {
  $map = proxy.$map
  isShowRoad.value = !isShowRoad.value
  if (!isShowRoad.value) {
    $map.getLayers().forEach((layer) => {
      if (layer.get('name') === '流量图层') {
        layer.setVisible(false)
        // console.log(layer)
      }
    })
  }
}
/**查询信息 */
const activeIndex = ref('1')
const input = ref('')
const inputSelect = ref('事件类型')
const handleSelect = (index) => {
  activeIndex.value = index
  // claerMap($map)
}

// 地图切换
const handlevector = () => {
  gaode_vector.setOpacity(1)
}
const handleimage = () => {
  gaode_vector.setOpacity(0)
}
/**输入搜索函数 */
const { InputQuery } = usequeryInput()
const search = async () => {
  if (input.value.trim() !== '' && proxy.$map) {
    // 输入查询
    let condition = null
    if (restList.value.length > 0) {
      let result = restList.value.find((item) => item.label === input.value)
      if (!result) {
        ElMessage.error('查询条件错误!')
        input.value = ''
        return
      }
      condition = `${inputSelect.value} LIKE '%${result.value}%' `
    } else {
      condition = `${inputSelect.value} LIKE '%${input.value}%' `
    }
    InputQuery(condition)
  }
}
const restList = ref([])
const loadAll = () => {
  if (inputSelect.value === '事件类型') {
    return [
      { label: '刮擦', value: '刮擦' },
      { label: '追尾', value: '追尾' },
      { label: '碾压', value: '碾压' },
      { label: '翻车', value: '翻车' },
      { label: '失火', value: '失火' },
      { label: '其他', value: '其他' },
    ]
  } else if (inputSelect.value === '处理状态') {
    return [
      { label: '待处理', value: '0' },
      { label: '处理中', value: '1' },
      { label: '已归档', value: '2' },
    ]
  } else {
    return []
  }
}
const querySearch = (queryString, cb) => {
  const rest = restList.value.filter(
    (item) => item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  )
  console.log(rest)
  cb(rest)
}
onMounted(() => {
  const data = JSON.parse(localStorage.getItem('data'))
  username.value = data.username
  type.value = data.type
})
watch(() => inputSelect.value, () => {
  restList.value = loadAll()
}, { immediate: true })
</script>

<style scoped>
.map-view {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#map {
  height: 100%;
}

.map-container {
  position: absolute;
  bottom: 20px;
  right: 40px;
  z-index: 1;
}

img {
  padding: 2px;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border-radius: 10px;
  border: 1px solid #fff;
  cursor: pointer;
}

.el-menu-demo {
  height: 50px;
}

.el-avatar {
  margin: auto 1%;
  cursor: pointer;
}

.flex-grow {
  flex-grow: 1;
}

.el-menu-item.noneSelect:hover,
.el-menu-item.noneSelect:focus {
  background: #545c64;
  /* 你想要的背景色 */
  cursor: pointer;
  /* 保持手形光标，表示可点击 */
}
.el-menu-item{
  padding: 0 10px;
}

.example-showcase {
  margin-top: 5px;
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.logo {
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  font-family: "隶书", cursive; 
  text-shadow: 1px 1px 2px #007bff; /* 添加阴影 */
}
</style>
